import React from 'react'
import { Breadcrumb, Layout, theme } from 'antd';
import { Outlet, useLocation, Link } from "react-router-dom"
const { Content } = Layout;
const breadcrumbs = {
    "/nav/home": [{ title: "首页" }],
    "/nav/addAccount": [{ title: "首页", link: "/nav/home" }, { title: "账户管理" }, { title: "添加账号" }],
    "/nav/accountList": [{ title: "首页", link: "/nav/home" }, { title: "账户管理" }, { title: "账号列表" }],
    "/nav/addShop": [{ title: "首页", link: "/nav/home" }, { title: "店铺管理" }, { title: "添加店铺" }],
    "/nav/shopList": [{ title: "首页", link: "/nav/home" }, { title: "店铺管理" }, { title: "店铺列表" }]
}

export default function MyContent() {
    const location = useLocation()
    const {
        token: { colorBgContainer },
    } = theme.useToken();
    return (
        <Layout
            style={{
                padding: '0 24px 24px',
            }}
        >
            <Breadcrumb
                style={{
                    margin: '16px 0',
                }}
            >
                {
                    (breadcrumbs[location.pathname] || []).map(item => {
                        return <Breadcrumb.Item key={item.title}>{item.link ? <Link to={item.link}>{item.title}</Link> : item.title}</Breadcrumb.Item>
                    })
                }
            </Breadcrumb>
            <Content
                style={{
                    padding: 24,
                    margin: 0,
                    minHeight: 280,
                    background: colorBgContainer,
                }}
            >
                <Outlet></Outlet>
            </Content>
        </Layout>
    )
}
